<template>
  <div class="header-wrap">
    <div class="station"></div>
    <div class="header-inner">
      <header class="header">
        <div class="logo" @click="$router.push({name:'Home'})">
          <img src="https://www.mfu.cn/static/imgs/mfu_login_2.svg" alt />
        </div>
        <!-- <img
          @click="$router.push({name:'login'})"
          style="width: 154px;margin-top: 4px;"
          src="~@/assets/img/img_10_13.png"
        /> -->
        <div class="meun">
          <i class="iconfont icon-iconfont06" @click="showmenu=!showmenu"></i>
        </div>
      </header>
      <transition name="el-fade-in">
        <div class="mask" @click="showmenu=false" v-if="showmenu"></div>
      </transition>
      <el-collapse-transition>
        <div class="menu-wraper" v-if="showmenu">
          <ul class="menu-m">
            <li>
              <router-link :to="{name:'Home'}">首页</router-link>
            </li>
            <li>
              <a>教培直播</a>
              <ul class="menu-s">
                <li>
                  <router-link :to="{name:'online-education'}">在线教育</router-link>
                  <router-link :to="{name:'pay-for-knowledge'}">知识付费</router-link>
                  <router-link :to="{name:'enterprise-live'}" >金融直播</router-link>
                  <router-link :to="{name:'marketing-talk'}">营销拓客</router-link>
                </li>
              </ul>
            </li>
            <li>
              <a>政企直播</a>
              <ul class="menu-s">
                <li>  
                  <router-link  :to="{name:'meeting-live'}">会议直播</router-link>
                  <router-link :to="{name:'activity-live'}" >活动直播</router-link>
                  <router-link :to="{name:'custom-programs'}">企业内训</router-link>
                  <router-link :to="{name:'events-live'}">新零售直播</router-link>
                </li>
              </ul>
            </li>
            <li>
              <router-link :to="{name:'price'}">价格</router-link>
              <!-- <ul class="menu-s">
                <li>
                  <a>直播系统</a>
                  <a>小程序&nbsp;&nbsp;&nbsp;&nbsp;</a>
                  <a>周边商城</a>
                  <a>A.I.微课</a>
                </li>
              </ul>-->
            </li>
            <li>
              <router-link :to="{name:'thost'}">渠道合作</router-link>
            </li>
            <li>
              <router-link :to="{name:'about'}">关于我们</router-link>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      //透明度值
      transparentValue: 0,
      showmenu: false
    };
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.header-wrap {
  .station {
    height: 50px;
  }
  .header-inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      background: white;
      box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.1);

      .logo {
        width: 135px;
        display: flex;
      }
      .meun {
        i {
          font-size: 30px;
        }
      }
    }
    .mask {
      position: fixed;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.6;
      z-index: 5;
    }
    .menu-wraper {
      background: #fff;
      position: fixed;
      z-index: 11;
      width: 100%;
      padding: 16px;
      border-top: 1px solid #f5f5f5;

      .menu-m > li {
        padding: 10px 0;
      }
      .menu-m > li a {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      .menu-m > li:first-child {
        padding-top: 0;
      }
      .menu-s > li {
        padding: 20px 0 0px 10px;
        margin-right: -16px;
        margin-bottom: -8px;
      }
      .menu-s > li p {
        color: #999;
        margin-bottom: 10px;
      }
      .menu-s > li a {
        display: inline-block;
        font-weight: normal;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        margin-right: 28px;
        padding: 0 4px;
        &:active {
          background: #f5f5f5;
        }
      }
    }
  }
}
</style>